1: hitArea 不影響物件本身的寬高
2: 設定 hitArea 時,感應區以 hitArea 設定為主,物件本身的邊界範圍不感應
3: hitArea 的座標為物件座標裡的 絕對位置
4: 設定 hitArea 後,如與其他物件重疊時,仍依據 物件深度
觸發事件
hitArea 屬性 的說明文件:DisplayObject#hitArea
hitArea:
Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.
[ Demo-1 ]:
測試: 加入 hitArea 並測試寬高
結果: 不影響物件寬高
[ Demo-2 ]:
測試: 做一個小於物件的 hitArea,測試在物件內但不在 hitArea 範圍的互動行為
結果: hitArea 範圍內可互動
,hitArea 範圍外不可互動
bunny.on('pointerdown', ()=>{
console.log('bunny pointerdown');
});
// bunny 的寬高為 26x37, 做一個大約半個兔子高的 hitArea
bunny.hitArea = new PIXI.Rectangle(0, 0, 26, 19);
因為 hitArea 不會顯示在畫面上,做了一個色塊墊在下面
色塊的大小、座標皆與 hitArea 相同,
但沒有設定 interactive
與 buttonMode
,不影響互動行為
滑鼠在 hitArea 上時,可觸發互動行為
滑鼠在兔子上,但不在 hitArea 範圍時,不會
觸發互動行為
[ Demo3-1 ]
測試: 將兔子放在畫面中央,並設定 hitArea 大小 10x10、座標 (0,0)
結果: 感應區在兔子的相對位置上
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);
因為沒設定兔子的中心點 (anchor 或 pivot),因此將兔子座標定在畫面中間時
兔子的位置會在畫面的中間向右下
感應區的 (0,0) 座標與兔子位置相同
[ Demo3-2 ]
測試: 使用 anchor 改變兔子素材的中心點,並設定 hitArea 大小 10x10、座標 (0,0)
結果: anchor 改變兔子素材的位置,但不影響感應區位置
bunny.anchor.set(0.5);
bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);
anchor.set(0.5)、沒有 pivot
anchor 設定會改變兔子素材的中心點,但兔子裡的 (0,0) 座標仍在原本位置
因此兔子座標、感應區位置與沒有設定 anchor 時相同
[ Demo3-3 ]
測試: 使用 pivot 改變整個物件的中心點,hitArea 為 10x10, 座標 (0,0)
結果: pivot 改變整個物件的中心點,因此感應區的 (0,0) 位置也改變了
bunny.pivot.set(13, 18.5);
bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);
pivot 與 anchor 屬性的討論可參考:
[Re:PixiJS - Day06] PixiJS 可視物件的微妙行為
[ Demo4 ]
測試: 畫面上放上兩隻兔子,並各自指定了比兔子本身還大的感應區,測試重疊感應區
結果: 僅觸發上層兔子的感應區
由於 rightBunny 在 leftBunny 的上方,
且設定了 interactive = true,阻斷了下層物件的感應
因此結果為: rightBunny pointerDown
使用 hitArea 不算在寬高的特性,製作超出元件大小的感應區滿方便的
但使用 hitArea 時,不容易從視覺上看出感應區的位置,不容易除錯